import React, { Component } from 'react';
import '../homepage.scss'
let echarts = require('echarts/lib/echarts');
require('echarts/lib/chart/bar');
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');

class ColumnChart extends Component {
    state = {

    }
    componentDidMount() {
        let barChart = echarts.init(document.getElementById('bar'));
        barChart.setOption({
            color: ['#108CEE'],
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow',
                    axis: 'y',
                    /*                   shadowStyle:{
                                          color:'#283A65'
                                      } */
                },
            },
            xAxis: {
                axisLine: {
                    lineStyle: {
                        color: 'white'
                    }
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: false
                },
                splitLine: {
                    lineStyle: {
                        color: '#6079B6'
                    }
                }
            },
            yAxis: {
                type: 'category',
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                axisLine: {
                    lineStyle: {
                        color: '#6079B6',
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: '#6079B6',
                        fontSize: 13
                    }
                },
                axisTick: {
                    show: false
                },
            },
            series: [{
                name: '数量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20, 12],
                barWidth: 12,
                roam: false,
                scaleLimit: {
                    min: 1,
                    max: 2
                },
            }],
            grid: {
                top: '3%',
                left: '13%',
                bottom: '5%'
            }
        })
    }
    render() {

        return (
            <div id="bar"></div>
        )
    }
}
export default ColumnChart;